<template>
	<div class='user-basic-info'>
		<div class="form">
			<div class="item">
				<h2>头像</h2>
				<div class="choose-avatar">
					<ChooseFile2
						accept="image/*"
						@change="uploadAvatar"
					/>
					<Avatar
						:size="70"
						:src="userForm.avatarUrl"
					/>
					<div class="desc">点击修改你的头像</div>
				</div>
			</div>
			<div class="item">
				<h2>昵称</h2>
				<el-input
					placeholder="输入你的昵称"
					size="large"
					v-model="userForm.nickname"
				/>
			</div>
			<div class="item">
				<h2>邮箱地址</h2>
				<el-input
					placeholder="输入你的邮箱地址"
					size="large"
					v-model="userForm.email"
				/>
			</div>
			<div class="item">
				<h2>性别</h2>
				<el-radio-group
					size="large"
					v-model="userForm.gender"
				>
					<el-radio :label="true">女</el-radio>
					<el-radio :label="false">男</el-radio>
				</el-radio-group>
			</div>
			<div class="item">
				<h2>专业技能</h2>
				<el-input
					placeholder="输入你的专业技能，例如：前端、后端、UI、产品"
					size="large"
					v-model="userForm.major"
				/>
			</div>
			<div class="item">
				<h2>个人介绍</h2>
				<el-input
					placeholder="用一段话让别人认识你"
					size="large"
					type="textarea"
					v-model="userForm.intro"
				/>
			</div>
			<div class="item">
				<el-button
					class="save-btn"
					type="primary"
					size="large"
					@click="updateUserInfo"
				>
					保存
				</el-button>
			</div>
		</div>
	</div>
</template>

<script lang="ts">
export default {
  route: {
    path: '',
    meta: {
      needLogin: true
    }
  }
}
</script>

<script setup lang="ts">
import { reactive } from 'vue'
import { UserInfoType } from '@/modules/user'
import { storeGetter, storeCommit } from '@/utils/store'
import { getPublicUploadSign } from '@/api/system'
import { putMe } from '@/api/user'
import { cosUpload } from '@/utils/file'
import { $loading, $hideLoading, $success } from '@/utils/functions'
import ChooseFile2 from '@/components/ChooseFile2/index.vue'
import Avatar from '@/components/Avatar/index.vue'

/* 初始化用户信息 */
const userInfo = storeGetter('getUserInfo').userInfo
console.log(userInfo)
const userForm = reactive<UserInfoType>({
  userId: userInfo.userId,
  avatarUrl: userInfo.avatarUrl,
  nickname: userInfo.nickname,
  email: userInfo.email,
  gender: userInfo.gender,
  major: userInfo.major,
  intro: userInfo.intro,
  specialtyTags: userInfo.specialtyTags,
  compTags: userInfo.compTags,
})

const updateUserInfo = async() => {
  $loading()
  try {
    await putMe(userForm)
    storeCommit('setUserInfo', {
      userInfo: {
        ...userInfo,
        ...userForm
      }
    })
    $success('修改成功')
  } catch (err) {
    console.log(err)
  }
  $hideLoading()
}

/**
 * 上传头像并修改
 */
const uploadAvatar = async(files:File[]) => {
  console.log(files)
  $loading()
  try {
    const sign = await getPublicUploadSign(`${ userForm.userId }-${ Date.now() }.JPG`)
    const res = await cosUpload(files[ 0 ], sign.data)
    userForm.avatarUrl = res
    updateUserInfo()
  } catch (err) {
    console.log(err)
  }
  $hideLoading()
}

</script>

<style lang="scss" scoped>
.user-basic-info {
  .form {
    max-width: 800px;
    padding: 20px;
    margin: auto;
    background-color: #ffffff;
    border-radius: $radiusMiddle;

    .item {
      &:not(:last-of-type) {
        margin-bottom: 25px;
      }

      h2 {
        margin-bottom: 5px;
      }

      .desc {
        font-size: $sSmall;
        color: $dark3;
      }

      /* 选择头像 */
      .choose-avatar {
        position: relative;
        padding: 20px;
        text-align: center;
        border: $borderLighter;
        border-radius: $radiusMiddle;
      }

      .save-btn {
        display: block;
        width: 50%;
        margin: 20px auto 0;
      }
    }
  }
}
</style>
